export interface ViewportOffsetResult {
  left: number,
  top: number,
  right: number,
  bottom: number,
  rightIncludeBody: number,
  bottomIncludeBody: number,
}

// Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
// 如
// x : 265.5
// y : 50
// width : 440
// height : 240
// top : 50
// right : 705.5
// bottom : 290
// left : 265.5
export function getBoundingClientRect(element: Element): DOMRect | number {
  if (!element || !element.getBoundingClientRect) {
    return 0
  }
  return element.getBoundingClientRect()
}

/**
 * 获取元素的 offset
 * left: 元素左边到视口左边的距离
 * top: 元素上边到视口上边的距离
 * right: 元素右边到视口右边的距离
 * bottom: 元素下边到视口下边的距离
 * rightIncludeBody: 元素左边到视口右边的距离
 * bottomIncludeBody: 元素上边到视口下边的距离
 */
export function getViewportOffset(element: Element): ViewportOffsetResult {
  const doc = document.documentElement || document.body

  // 获取html元素对象的左边框的宽度
  const docClientLeft = doc.clientLeft
  // 获取html元素对象的上边框的宽度
  const docClientTop = doc.clientTop

  const box = getBoundingClientRect(element)

  const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect

  const left = retLeft + (docClientLeft || 0)
  const top = rectTop + (docClientTop || 0)

  // 获取浏览器窗口文档显示区域的宽度，不包括滚动条
  const clientWidth = doc.clientWidth
  // 获取浏览器窗口文档显示区域的高度，不包括滚动条
  const clientHeight = doc.clientHeight

  return {
    left,
    top,
    right: clientWidth - rectWidth - left,
    bottom: clientHeight - rectHeight - top,
    rightIncludeBody: clientWidth - left,
    bottomIncludeBody: clientHeight - top,
  }
}
